<template>
    <div class="zhexiantu">
        <div id="container" class="chart" style="height: 100%"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
    });
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            data: [1, 2, 3, 4, 5, 6, 7]

        },
        series: [
            {
                data: [1, 5, 7, 10, 5, 6, 8, 5, 12],
                type: 'line',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(5, 115, 233, 0.3)",
                        },
                        {
                            offset: 1,
                            color: "rgba(5,114,233,0)",
                        },
                    ]),
                },

            }
        ]
    };

    option && myChart.setOption(option);

});

</script>

<style scoped>
.zhexiantu {
    width: 100%;
    height: 300px;
    margin-top: -50px;
}
</style>